<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>01.读取记事本文件的内容</title>
        <script>
        		/**
        		 * Ajax：Asynchronous Javascript and XML ---> 异步的Javascript和XML
        		 * 1.Ajax其实就是用javascript异步形式去操作XML
        		 * 2.Ajax其实就是用来跟后台做动态数据交互
        		 * 3.Ajax优点，如下：
        		 * (1).节省用户操作时间，提高用户体验
        		 * (2).减少数据请求，实现了页面无刷新请求数据
        		 * (3).相对于同步ajax：不会造成UI卡死，用户体验好
        		 * (4).相对于刷新页面，省流量
        		 * 4.Ajax缺点，如下：
        		 * (1).后退按钮无效，
        		 * (2).多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要比较复杂
        		 * 的判断机制
        		 * (3).搜索引擎不友好
        		 * (4).数据安全
        		 */
        		/**
        		 * 经常面试的过程中面试官就会问了，同步和异步的区别在哪里？什么时候需要用同步模式
        		 * 答：当你后续代码的执行需要与前面的程序进行挂钩的时候，这时候可以采取同步模式。
        		 * 同步是会阻塞代码执行的，那么也就是说我们后续代码的执行必须要等到前面代码工作
        		 * 完成之后才能继续。当然啦，同步模式我们一般都会采取事件回调的形式去做
        		 */
            window.onload = function () {
                var oBtn = document.getElementById("btn1");
                oBtn.addEventListener('click', function () {
                    // 创建AJAX核心对象，做下IE6的兼容
                    var oxhr = null;
                    if (window.XMLHttpRequest) {
                        oxhr = new XMLHttpRequest();
                    } else {
                        oxhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }

                    // 创建AJAX核心对象，做下IE6的兼容
                    // try {
                    //     oxhr = new XMLHttpRequest();
                    // } catch (e) {
                    //     oxhr = new ActiveXObject("Microsoft.XMLHTTP");
                    // }

                    // 与服务器建立连接
                    // open方法接收三个参数，请求类型，请求url，是否是异步
                    // 同步：阻塞模式，事情得一件件做，前面的代码会影响后面代码的执行
                    // 异步：非阻塞模式，多个事情可以同时一起做，前面的代码不会影响后面代码的执行
                    oxhr.open('GET', './txt/allen.txt', true);

                    // 发送数据
                    oxhr.send(null);

                    // 等待服务器返回结果
                    // reponseText：返回以文本形式存放的内容
                    // reponseXML：返回以XML形式的内容
                    // status：服务器状态码
                    oxhr.onreadystatechange = function () {
                        /**
                         * 当为异步请求时，XHR的readystate属性有以下属性值：
                         * 当为0时，(初始化) 还没有调用open()方法；
                         * 当为1时，(载入) 已调用send()方法，正在发送请求；
                         * 当为2时，(载入完成) send()方法完成，已收到全部响应内容；
                         * 当为3时，(解析) 正在解析响应内容；
                         * 当为4时，(完成) 响应内容解析完成，可以在客户端调用了
                         */
                        if (oxhr.readyState == 4) {
                            if ((oxhr.status >= 200 && oxhr.status < 300) || oxhr.status == 304) {
                                alert(oxhr.responseText);
                            } else {
                            		alert('通信失败：' + oxhr.status);
                            }
                        }
                    };
                }, false);
            };
        </script>
    </head>
    <body>
        <input type="button" value="获取txt里面的内容" id="btn1" />
    </body>
</html>
